How to add scrolling text in Blogger

 How to add scrolling text in Blogger


Blogger is so easy to add or edit some features. here is the video to see how to add Moving text in the blogger template

source code of scrolling text

Html code

<div class="waqar">
<p><b>Listen!</b> if you liked my video then plz support me to subscribe my channel... </p>
</div>


CSS code


<style>
.waqar {
 height: 50px;
 overflow: hidden;
 position: relative;
 background: transparent;
 color: red;
 border: 1px solid black;
}
.waqar p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 5px;
 text-align: center;
 /* Starting position */
 transform:translateX(100%);
 /* Apply animation to this element */
 animation: waqar 17s linear infinite;
}
/* Move it (define the animation) */
/* subscribe my channel  https://www.youtube.com/channel/UCXsaMes2HkuEd8r3qtcz96Q */
@keyframes waqar {
 0%   {
 transform: translateX(100%);
 }
 100% {
 transform: translateX(-100%); 
 }
}
</style>


end code


Designed With by WAQAR BALOCH | 2024